import React, { useState, useEffect } from "react";
import "./index.scss";
import {
    PageHeader,
    Input,
    Divider,
    Button,
    Table,
    Space,
    Row,
    Col,
    Form
} from "antd";
import FindLogs from "../../../../api/ykh/log_ykh"
import moment from "moment";
//Header表头
const routes = [
    {
        path: "index",
        breadcrumbName: "设置",
    },
    {
        path: "first",
        breadcrumbName: "操作日志",
    },
];


//Content表格列数据
const columns = [
    {
        title: "操作时间",
        dataIndex: "operateTime",
    },
    {
        title: "操作人",
        dataIndex: "operatePeople",
    },
    {
        title: "操作模块",
        dataIndex: "operateModule",
    },
    {
        title: "操作内容",
        dataIndex: "operateContent",
    },
];



export default function ImgAbout() {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const onSelectChange = (newSelectedRowKeys) => {
        console.log("selectedRowKeys changed: ", selectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    // 查询
    const [searchForm] = Form.useForm();
    const onFinish = () => {
        console.log(searchForm.getFieldsValue(), "chaxun");
        logstate(searchForm.getFieldsValue());
    };
    // 重置
    const reset = () => {
        searchForm.setFieldsValue({ "name": "" });
        logstate({})
    }
    //表格数据
    const [dataSource, setDataSource] = useState([])
    //获取数据
    const logstate = (obj) => {
        FindLogs.findlog(obj).then((res) => {
            let a = res.data
            // console.log(res.data);
            let Datas = [...a];
            for (let i = 0; i < Datas.length; i++) {
                Datas[i].key = i;
                Datas[i].operateTime = moment(Datas[i].operateTime).format("YYYY/MM/DD HH:mm:ss");
            }
            setDataSource(Datas)
        });
    };
    //生命周期
    useEffect(() => {
        logstate({});

    }, []);
    //页码
    const showTotal = (total) => `数量 ${total} 条`;
    return (
        <>
            <div className="Header">
                <PageHeader
                    className="site-page-header"
                    title="操作日志"
                    breadcrumb={{
                        routes,
                    }}
                />
                <Divider plain></Divider>
                <Form
                    initialValues={{
                        size: "large",
                    }}
                    colon={false}
                    form={searchForm}
                    name="control-hooks"
                    size={"middle"}
                >
                    <Row className="" gutter={40}>
                        <Col span={8}>
                            <Form.Item labelCol={{ offset: 1 }} name="name" label="操作人">
                                <Input placeholder="请输入"></Input>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <div className="abs-btns">
                    <Space>
                        <Button type="primary" size={"middle"} onClick={onFinish}>
                            查询
                        </Button>
                        <Button size={"middle"} onClick={() => { reset() }}>重置</Button>
                    </Space>
                </div>
            </div>
            <div className="Content ">
                <div className="flex2">
                    <div className="Content-left">
                        <h3 className="Advertising-Banner-List">操作记录</h3>
                    </div>
                    <div className="Content-right">

                        <Button className="batchBtn">导出</Button>
                    </div>
                </div>

                <Table
                    className={StyleSheet.rowStyle}
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={{
                        total: dataSource.length,
                        showTotal: showTotal,
                        showSizeChanger: true,
                        showQuickJumper: true,
                    }}
                />
            </div>
        </>
    );
}
